<!doctype html>
<html class="no-js">
<link rel="stylesheet" href="s.css" />
<h1>Tests for <a href="../../../">recipes</a>/<a href="../../">ui</a>/<a href="../">menu</a>/dropdown</h1>

<p class="doc">You just need to do two things :</p>
<ul class="doc">
    <li>Add a class "no-js" to a parent element (e.g.: &lt;html class="no-js"&gt;</li>
    <li>style ul/li !</li>
</ul>
<p class="doc">Optionnaly use a javascript to manage change 'no-js' class, and add a timer to make a better UX (see <a href="http://www.useit.com/alertbox/mega-dropdown-menus.html">here</a>)
<br />@todo a jquery plugin link here (I need to make a jquery plugin of the helper I use everytime i need a dropdown menu)</p>

<nav>
    <ul>
        <li>
            One
            <ul>
                <li>
                    Sub
                    <ul>
                        <li>
                            Sub sub
                        </li>
                        <li>
                            Sub sub
                        </li>
                    </ul>
                </li>
                <li>
                    Sub
                    <ul>
                        <li>
                            Sub sub
                        </li>
                        <li>
                            Sub sub
                        </li>
                    </ul>
                </li>
                <li>
                    Sub
                </li>
            </ul>
        </li>
        <li>
            Two
            <ul>
                <li>
                    Sub
                </li>
                <li>
                    Sub
                </li>
            </ul>
        </li>
        <li>
            Tree
            <ul>
                <li>
                    Sub
                </li>
                <li>
                    Sub
                </li>
            </ul>
        </li>
    </ul>
</nav>